<template>
  <div>
    <div class="tabs">
      <!-- 使用a标签或者 `router-link` 跳转缺点：只要鼠标一点就能跳转 -->
      <!-- 那么有的时候我需要满足条件才跳转用 `router-link` 就不好做了 -->
      <!-- 例如：登录 -->
      <router-link to="/discover">发现音乐</router-link>
      <router-link to="/my">我的</router-link>
      <router-link to="/friend">关注</router-link>

      <button @click="fn1">点我用代码跳转到关注</button>
      <button @click="fn2">点我用代码跳转到关注 -- params传值</button>
    </div>

    <!-- 一级路由出口 -->
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    fn1() {
      // if (满足条件)
      this.$router.push("/friend");

      // 编程式导航传值也是可以通过拼接来传（不推荐）
      // this.$router.push('/friend?name=andy&age=19')

      // 推荐如下写法
      this.$router.push({
        // path: "/friend",
        name: "fr",
        query: {
          name: "andy",
          age: 19,
        },
      });
    },

    fn2() {
      // 如果用代码进行跳转而且还要传值的话，建议跳转时用name跳转
      // 也就是需要先在路由规则里给路由起一个名字，然后通过名字跳转
      // 因为path跳转不支持params传值，只支持query传值
      // 如果用name，不管是 query  还是 params 都支持
      this.$router.push({
        // path: "/friend",
        name: "fr",
        params: {
          money: 999,
          bank: "中国银行",
        },
      });
    },
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.tabs {
  display: flex;
  background: #242424;
  height: 60px;
  align-items: center;
}
.tabs a {
  flex: 1;
  text-decoration: none;
  color: #fff;
  text-align: center;
}

.router-link-active {
  color: red !important;
}
</style>